<template>
  <div v-loading="state.loading">
    <div class="vue-box monitorBlock">
      <div class="c-panel chartBlockPro" id="myChart">
      </div>
      <div class="c-panel chartBlockPro" id="myChart1">
      </div>
    </div>
    <div class="vue-box monitorBlock">
      <div class="c-panel chartBlock">
        <div>
          <el-descriptions title="服务器信息" :column="1" border>
            <el-descriptions-item label="运行时长" class="infoBlock">{{serverInfo.times}}天</el-descriptions-item>
            <el-descriptions-item label="当前登陆用户数" class="infoBlock">
              <el-tag size="medium">{{serverInfo.users}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="版本号" class="infoBlock">
              <el-tag size="info">{{serverInfo.version}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="硬件架构" class="infoBlock">
              <el-tag size="warning">{{serverInfo.structure}}位</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="网络情况" class="infoBlock">
              <el-tag
                  :type="serverInfo.networking=='200' ? 'success':'warning' " size="medium">{{serverInfo.networking}}</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
      <div class="c-panel chartBlock" id="myChart2">
      </div>
      <div class="c-panel chartBlock" id="myChart3">
      </div>
    </div>
    <div class="vue-box monitorBlock">
      <div class="c-panel chartBlockPro" id="myChart4">
      </div>
      <div class="c-panel chartBlockPro" id="myChart5">
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "monitor",
  data(){
    return{
      state:{
        loading:true
      },
      //cpu信息
      cpuInfo:{
        us:"",//用户使用
        sy:"",//系统使用
        id:""//空闲
      },
      //进程信息
      tasks:{
        running:"",
        sleeping:"",
        stopped:"",
        zombie:""
      },
      //磁盘信息
      swapInfo:{
        used:"",//已用
        free:""//空闲
      },
      //内存信息
      memInfo:{
        used:"",//已用
        free:"",//空闲
        cache:""
      },
      accessNginx:{
        times:[]
      },
      //访问nginx最多的ip
      ipToNginx:{
        ip:[],
        times:[]
      },
      //服务器信息
      serverInfo:{
        times:'',
        users:'',
        networking:'',
        version:"",
        structure:""
      }
    }
  },
  methods:{
    f5(){
      this.request('/api/monitor/list').then(res=>{
        if(!res){return}
        console.log(res)
        let data=res.data;
        this.cpuInfo=data.cpu;
        this.tasks=data.tasks;
        this.memInfo=data.mem;
        this.swapInfo=data.swap;
        this.serverInfo=data.serverInfo
        this.ipToNginx=data.ipToNginx
        this.accessNginx.times=data.visitNginx
        this.buildCharts();
      })
    },
    //获取近七天的时间，并格式化为MM-dd
    getDate(){
      var now = new Date();
      var dates = [];
      for (var i = 6; i >= 0 ; i--) {
        var date = new Date(now.getFullYear(), now.getMonth(), now.getDate() - i);
        var formattedDate = date.toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' });
        dates.push(formattedDate);
      }
      return dates;
    },
    buildCharts(){
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('myChart'));
      var myChart1 = echarts.init(document.getElementById('myChart1'));
      var myChart2 = echarts.init(document.getElementById('myChart2'));
      var myChart3 = echarts.init(document.getElementById('myChart3'));
      var myChart4 = echarts.init(document.getElementById('myChart4'));
      var myChart5 = echarts.init(document.getElementById('myChart5'));
      // 指定cpu图表的配置项和数据
      var option = {
        title: {
          text: 'cpu使用情况',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}%'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          y: 'bottom',
        },
        series: [
          {
            name: 'cpu使用',
            type: 'pie',
            radius: [40, 120],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: this.cpuInfo.us, name: '用户使用' },
              { value: this.cpuInfo.sy, name: '系统使用' },
              { value: this.cpuInfo.id, name: '空闲' },
            ]
          }
        ]
      };
      // 指定进程图表的配置项和数据
      var option1 = {
        title: {
          text: '进程运行情况',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}个 ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          y: 'bottom',
        },
        series: [
          {
            name: '进程运行',
            type: 'pie',
            radius: [40, 120],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: this.tasks.running, name: '正在运行' },
              { value: this.tasks.sleeping, name: '睡眠中' },
              { value: this.tasks.stopped, name: '已停止' },
              { value: this.tasks.zombie, name: '僵尸进程' },
            ]
          }
        ]
      };
      // 指定磁盘图表的配置项和数据
      var option2 = {
        title: {
          text: '磁盘空间使用情况',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}MB ({d}%)'
        },
        legend: {
          //这里的配置可以将图例放到右下角并垂直，这样标题和图例就不会重叠
          orient: 'vertical',
          x:'right',
          y: 'bottom',
        },
        series: [
          {
            name: '磁盘空间',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              {value: this.swapInfo.used, name: '已使用'},
              {value: this.swapInfo.free, name: '空闲'}
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              formatter: '{b}'
            },
            labelLine: {
              show: true
            },
          }
        ]
      };
      // 指定内存图表的配置项和数据
      var option3 = {
        title: {
          text: '内存使用情况',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}MB ({d}%)'
        },
        legend: {
          orient: 'vertical',
          x: 'right',
          y: 'bottom',
        },
        series: [
          {
            name: '内存使用情况',
            type: 'pie',
            radius: ['40%', '55%'],
            center: ['50%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}'
            },
            labelLine: {
              show: true
            },
            data: [
              {value: this.memInfo.used, name: '已使用'},
              {value: this.memInfo.free, name: '空闲'},
              {value: this.memInfo.cache, name: '用作缓存'}
            ]
          }
        ]
      };
      // 配置nginx访问次数图表选项和数据
      var option4 = {
        title: {
          text: 'nginx 近七天被访问次数'
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b}: {c}次'
        },
        xAxis: {
          name:"日期",
          type: 'category',
          boundaryGap: false,
          data: this.getDate()
        },
        yAxis: {
          name:"访问次数",
          type: 'value'
        },
        series: [
          {
            name: '访问次数',
            type: 'line',
            smooth: true,
            data: this.accessNginx.times
          }
        ]
      };
      // 配置访问nginx最多的ip图表选项和数据
      var option5 = {
        title: {
          text: '访问次数最多的前五个 IP'
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{b}: {c}次'
        },
        xAxis: {
          name:"ip",
          type: 'category',
          data: this.ipToNginx.ip
        },
        yAxis: {
          name:"访问次数",
          type: 'value'
        },
        series: [
          {
            name: '访问次数',
            type: 'bar',
            data: this.ipToNginx.times
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      myChart1.setOption(option1)
      myChart2.setOption(option2);
      myChart3.setOption(option3);
      myChart4.setOption(option4);
      myChart5.setOption(option5)
      this.state.loading=false
    }
  },
  mounted() {
    //初始化数据
    this.f5();
  }
}
</script>

<style>
.monitorBlock {
  display: flex;
  height: auto;
}
.chartBlock {
  width: 30%;
  height: 350px;
  border: 2px solid transparent; /* 设置透明边框 */
  border-radius: 10px; /* 设置圆角 */
}
.chartBlockPro {
  width: 47%;
  height: 400px;
  border: 2px solid transparent; /* 设置透明边框 */
  border-radius: 10px; /* 设置圆角 */
}
.infoBlock {
  display: block;
  margin-bottom: 10px;
}
</style>